<html>
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <title>
   数据可视化神器：开源组件ECharts使用心得（一）  | 数螺 | NAUT IDEA
  </title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <style type="text/css">
   #xmain img {
                  max-width: 100%;
                  display: block;
                  margin-top: 10px;
                  margin-bottom: 10px;
                }

                #xmain p {
                    line-height:150%;
                    font-size: 16px;
                    margin-top: 20px;
                }

                #xmain h2 {
                    font-size: 24px;
                }

                #xmain h3 {
                    font-size: 20px;
                }

                #xmain h4 {
                    font-size: 18px;
                }


                .header {
	           background-color: #0099ff;
	           color: #ffffff;
	           margin-bottom: 20px;
	        }

	        .header p {
                  margin: 0px;
                  padding: 10px 0;
                  display: inline-block;  
                  vertical-align: middle;
                  font-size: 16px;
               }

               .header a {
                 color: white;
               }

              .header img {
                 height: 25px;
              }
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js">
  </script>
  <script src="http://nautstatic-10007657.file.myqcloud.com/static/css/readability.min.js" type="text/javascript">
  </script>
  <script type="text/javascript">
   $(document).ready(function() {
                 var loc = document.location;
                 var uri = {
                  spec: "http://dataunion.org/6423.html",
                  host: "http://dataunion.org",
                  prePath: "http://dataunion.org",
                  scheme: "http",
                  pathBase: "http://dataunion.org/"
                 };
    
                 var documentClone = document.cloneNode(true);
                 var article = new Readability(uri, documentClone).parse();
     
                 document.getElementById("xmain").innerHTML = article.content;
                });
  </script>
  <!-- 1466455197: Accept with keywords: (title(0.285714285714):社区,数盟,神器,开源,可视化,组件,数据, topn(0.233333333333):插件,路径,数盟,图表,行业资讯,开源,文件夹,数据挖掘,图形,数据分析,文件,配置文件,示例,标签,职业规划,可视化,文章,组件,文档,数据,社区,属性,控件,文件目录,基础架构,编程语言,标记,地图,官方,图标).-->
 </head>
 <body onload="">
  <div class="header">
   <div class="container">
    <div class="row">
     <div class="col-xs-6 col-sm-6 text-left">
      <a href="/databee">
       <img src="http://nautidea-10007657.cos.myqcloud.com/logo_white.png"/>
      </a>
      <a href="/databee">
       <p>
        数螺
       </p>
      </a>
     </div>
     <div class="hidden-xs col-sm-6 text-right">
      <p>
       致力于数据科学的推广和知识传播
      </p>
     </div>
    </div>
   </div>
  </div>
  <div class="container text-center">
   <h1>
    数据可视化神器：开源组件ECharts使用心得（一）
   </h1>
  </div>
  <div class="container" id="xmain">
   ﻿﻿
   <title>
    数据可视化神器：开源组件ECharts使用心得（一） | 数盟社区
   </title>
   <!-- All in One SEO Pack 2.2.7.6.2 by Michael Torbert of Semper Fi Web Design[32,73] -->
   <!-- /all in one seo pack -->
   <!--
<div align="center">
<a href="http://strata.oreilly.com.cn/hadoop-big-data-cn?cmp=mp-data-confreg-home-stcn16_dataunion_pc" target="_blank"><img src="http://dataunion.org/wp-content/uploads/2016/05/stratabj.jpg"/ ></a>
</div>
-->
   <header id="header-web">
    <div class="header-main">
     <hgroup class="logo">
      <h1>
       <a href="http://dataunion.org/" rel="home" title="数盟社区">
        <img src="http://dataunion.org/wp-content/themes/yzipi/images/logo.png"/>
       </a>
      </h1>
     </hgroup>
     <!--logo-->
     <nav class="header-nav">
      <ul class="menu" id="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95">
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-71" id="menu-item-71">
        <a href="http://dataunion.org/category/events" title="events">
         活动
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22457" id="menu-item-22457">
          <a href="http://dataunion.org/2016timeline">
           2016档期
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22459" id="menu-item-22459">
          <a href="http://dataunion.org/category/parterc">
           合作会议
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-has-children menu-item-20869" id="menu-item-20869">
        <a href="http://dataunion.org/category/tech" title="articles">
         文章
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20867" id="menu-item-20867">
          <a href="http://dataunion.org/category/tech/base" title="base">
           基础架构
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3302" id="menu-item-3302">
          <a href="http://dataunion.org/category/tech/ai" title="ai">
           人工智能
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3303" id="menu-item-3303">
          <a href="http://dataunion.org/category/tech/analysis" title="analysis">
           数据分析
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21920" id="menu-item-21920">
          <a href="http://dataunion.org/category/tech/dm">
           数据挖掘
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-3314" id="menu-item-3314">
          <a href="http://dataunion.org/category/tech/viz" title="viz">
           可视化
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3305" id="menu-item-3305">
          <a href="http://dataunion.org/category/tech/devl" title="devl">
           编程语言
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-20876" id="menu-item-20876">
        <a href="http://dataunion.org/category/industry">
         行业
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16328" id="menu-item-16328">
          <a href="http://dataunion.org/category/industry/case" title="case">
           行业应用
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2112" id="menu-item-2112">
          <a href="http://dataunion.org/category/industry/demo" title="demo">
           Demo展示
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21562" id="menu-item-21562">
          <a href="http://dataunion.org/category/industry/news">
           行业资讯
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-311" id="menu-item-311">
        <a href="http://dataunion.org/category/sources" title="sources">
         资源
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20870" id="menu-item-20870">
        <a href="http://dataunion.org/category/books" title="book">
         图书
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21363" id="menu-item-21363">
        <a href="http://dataunion.org/category/training">
         课程
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-21853" id="menu-item-21853">
        <a href="http://dataunion.org/category/jobs">
         职位
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22050" id="menu-item-22050">
          <a href="http://dataunion.org/category/career">
           职业规划
          </a>
         </li>
        </ul>
       </li>
      </ul>
     </nav>
     <!--header-nav-->
    </div>
   </header>
   <!--header-web-->
   <div id="main">
    <div id="soutab">
     <form action="http://dataunion.org/" class="search" method="get">
     </form>
    </div>
    <div id="container">
     <nav id="mbx">
      当前位置：
      <a href="http://dataunion.org">
       首页
      </a>
      &gt;
      <a href="http://dataunion.org/category/tech">
       文章
      </a>
      &gt;
      <a href="http://dataunion.org/category/tech/viz">
       可视化
      </a>
      &gt;  正文
     </nav>
     <!--mbx-->
     <article class="content">
      <header align="centre" class="contenttitle">
       <div class="mscc">
        <h1 class="mscctitle">
         <a href="http://dataunion.org/6423.html">
          数据可视化神器：开源组件ECharts使用心得（一）
         </a>
        </h1>
        <address class="msccaddress ">
         <em>
          3,649 次阅读 -
         </em>
         <a href="http://dataunion.org/category/tech/viz" rel="category tag">
          可视化
         </a>
        </address>
       </div>
      </header>
      <div class="content-text">
       <h2>
        前言
       </h2>
       <p>
        上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。
       </p>
       <h2>
        <p name="t2">
        </p>
        1.    插件的下载
       </h2>
       <p>
        以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。
       </p>
       <p>
        ECharts下载地址：
        <a href="http://echarts.baidu.com/" target="_blank">
         http://echarts.baidu.com/
        </a>
       </p>
       <p>
        ZRender下载地址：
        <a href="http://ecomfe.github.io/zrender/index.html" target="_blank">
         http://ecomfe.github.io/zrender/index.html
        </a>
       </p>
       <p>
        下载之后解压各自的文件目录结构如下：
       </p>
       <p>
        ECharts：
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/16165955-22874cebac484e23b650ee074316dc65.png"/>
       </p>
       <p>
        ZRender:
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/16170007-49da6cb8e67442b29f4a23f95e5afaae.png"/>
       </p>
       <h2>
        <p name="t3">
        </p>
        2.    插件的引用
       </h2>
       <p>
        首先，新建一个Web应用程序，然后添加刚刚下载的文件，具体的目录结构如下：
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/16170026-dbba4f3577dc4f0f8176e9a0427d3e59.png"/>
       </p>
       <p>
        这里有以下几点需要说明：
       </p>
       <p>
        l  所有的跟ECharts有关的文件全部都在echarts文件夹下
       </p>
       <p>
        l  echarts文件夹的内容分为两部分
       </p>
       <p>
        1)       一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/16170043-923302d7ee8547038fa675b6c8815265.png"/>
       </p>
       <p>
        2)       另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/16170056-b847ebbd759247499076c0cdf1b8bf1c.png"/>
       </p>
       <h2>
        <p name="t4">
        </p>
        3.    在页面中的具体使用
       </h2>
       <p>
        按照上边的步骤配置过之后，我们就可以在页面中引用了，这里我主要是演示地图控件的使用方式，因为地图的引用跟其他的基本图形的引用不太一样。其他的图形的呈现也会做一个简要的演示。
       </p>
       <h3>
        <p name="t5">
        </p>
        3.1          MapChart
       </h3>
       <p>
        首先在跟2中的echarts文件夹同一个目录（也就是Modules文件夹）下添加一个aspx页或html页，需要注意的是，如果是在aspx页中使用echarts时，需要把要渲染的div放在form标签之外，否则图形是显示不出来的。
       </p>
       <h4>
        <p name="t6">
        </p>
        3.1.1 在head标签中添加对echarts的引用如下：
       </h4>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_csharp">
          <div class="bar">
           <div class="tools">
            <b>
             [csharp]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_1" name="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;head runat=
            <span class="string">
             “server”
            </span>
            &gt;
           </li>
           <li class="">
            &lt;title&gt;&lt;/title&gt;
           </li>
           <li class="alt">
            &lt;script src=
            <span class="string">
             “echarts/esl.js”
            </span>
            type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;&lt;/script&gt;
           </li>
           <li class="">
            &lt;/head&gt;
           </li>
          </ol>
         </div>
        </div>
        <p>
        </p>
       </div>
       <h4>
        <p name="t7">
        </p>
        3.1.2 在body标记中，form标记之外，添加一个div，用来做图表渲染的容器。如下：
       </h4>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_csharp">
          <div class="bar">
           <div class="tools">
            <b>
             [csharp]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_2" name="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;body&gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            &lt;div id=
            <span class="string">
             “main”
            </span>
            style=
            <span class="string">
             “height:500px;border:1px solid #ccc;padding:10px;”
            </span>
            &gt;&lt;/div&gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            ……………
           </li>
           <li class="">
           </li>
           <li class="alt">
            ……………
           </li>
           <li class="">
           </li>
           <li class="alt">
            &lt;/body&gt;
           </li>
          </ol>
         </div>
        </div>
        <p>
        </p>
       </div>
       <h4>
        <p name="t8">
        </p>
        3.1.3 在3.1.3中添加的div标记下，添加如下的js代码段，如下：
       </h4>
       <div>
        <p class="a">
         <strong>
         </strong>
        </p>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_csharp">
          <div class="bar">
           <div class="tools">
            <b>
             [csharp]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_3" name="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;script type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="comment">
             //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。
            </span>
           </li>
           <li class="">
            这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。
           </li>
           <li class="alt">
           </li>
           <li class="">
            require.config({
           </li>
           <li class="alt">
           </li>
           <li class="">
            paths: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            echarts:
            <span class="string">
             ‘./echarts/echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/map’
            </span>
            :
            <span class="string">
             ‘./echarts/echarts-map’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            });
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="comment">
             //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            require(
           </li>
           <li class="alt">
           </li>
           <li class="">
            [
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/map’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            function (ec) {
           </li>
           <li class="alt">
           </li>
           <li class="">
            varmyChart=ec.init(document.getElementById(
            <span class="string">
             ‘main’
            </span>
            ));
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="comment">
             //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            option= {
           </li>
           <li class="alt">
           </li>
           <li class="">
            title: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            text:
            <span class="string">
             ‘iphone销¨²量¢?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            subtext:
            <span class="string">
             ‘纯ä?属º?虚¨¦构1’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            x:
            <span class="string">
             ‘center’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            tooltip: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            trigger:
            <span class="string">
             ‘item’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            legend: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            orient:
            <span class="string">
             ‘vertical’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            x:
            <span class="string">
             ‘left’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
            <span class="string">
             ‘iphone3’
            </span>
            ,
            <span class="string">
             ‘iphone4’
            </span>
            ,
            <span class="string">
             ‘iphone5’
            </span>
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            dataRange: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            min:0,
           </li>
           <li class="alt">
           </li>
           <li class="">
            max:2500,
           </li>
           <li class="alt">
           </li>
           <li class="">
            text: [
            <span class="string">
             ‘高?’
            </span>
            ,
            <span class="string">
             ‘低Ì¨ª’
            </span>
            ],
            <span class="comment">
             // 文?本À?，ê?默?认¨?为a数ºy值¦Ì文?本À?
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            calculable:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            textStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            color:
            <span class="string">
             ‘orange’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            toolbox: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            show:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            orient:
            <span class="string">
             ‘vertical’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            x:
            <span class="string">
             ‘right’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            y:
            <span class="string">
             ‘center’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            feature: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            mark:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            dataView: { readOnly:
            <span class="keyword">
             false
            </span>
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            restore:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            saveAsImage:
            <span class="keyword">
             true
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            series: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘iphone3’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘map’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            mapType:
            <span class="string">
             ‘china’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            selectedMode:
            <span class="string">
             ‘single’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            normal: { label: { show:
            <span class="keyword">
             true
            </span>
            },color:
            <span class="string">
             ‘#ffd700’
            </span>
            },
            <span class="comment">
             // for legend
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            emphasis: { label: { show:
            <span class="keyword">
             true
            </span>
            } }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘北À¡À京?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘天¬¨¬津¨°’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘上¦?海¡ê’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘重?庆¨¬’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘河¨®北À¡À’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘河¨®南?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘云?南?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘辽¢¨¦宁t’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘黑¨²龙¢¨²江-‘
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘湖t南?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘安ã2徽?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘山¦?东?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘新?疆?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘江-苏?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘浙?江-‘
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘江-西¡Â’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘湖t北À¡À’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘广?西¡Â’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘甘¨º肃¨¤’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘山¦?西¡Â’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘内¨²蒙¨¦古?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘陕¦?西¡Â’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘吉a林¢?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘福¡ê建¡§’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘贵¨®州Y’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘广?东?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘青¨¤海¡ê’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘西¡Â藏?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘四?川ä¡§’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘宁t夏?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘海¡ê南?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘台¬¡§湾ª?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘香?港?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘澳ã?门?’
            </span>
            ,value:Math.round(Math.random() *1000) }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘iphone4’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘map’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            mapType:
            <span class="string">
             ‘china’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            selectedMode:
            <span class="string">
             ‘single’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            normal: { label: { show:
            <span class="keyword">
             true
            </span>
            },color:
            <span class="string">
             ‘#ff8c00’
            </span>
            },
            <span class="comment">
             // for legend
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            emphasis: { label: { show:
            <span class="keyword">
             true
            </span>
            } }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘北À¡À京?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘天¬¨¬津¨°’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘上¦?海¡ê’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘重?庆¨¬’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘河¨®北À¡À’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘安ã2徽?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘新?疆?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘浙?江-‘
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘江-西¡Â’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘山¦?西¡Â’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘内¨²蒙¨¦古?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘吉a林¢?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘福¡ê建¡§’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘广?东?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘西¡Â藏?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘四?川ä¡§’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘宁t夏?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘香?港?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘澳ã?门?’
            </span>
            ,value:Math.round(Math.random() *1000) }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘iphone5’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘map’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            mapType:
            <span class="string">
             ‘china’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            selectedMode:
            <span class="string">
             ‘single’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            normal: { label: { show:
            <span class="keyword">
             true
            </span>
            },color:
            <span class="string">
             ‘#da70d6’
            </span>
            },
            <span class="comment">
             // for legend
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            emphasis: { label: { show:
            <span class="keyword">
             true
            </span>
            } }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘北À¡À京?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘天¬¨¬津¨°’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘上¦?海¡ê’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘广?东?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘台¬¡§湾ª?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘香?港?’
            </span>
            ,value:Math.round(Math.random() *1000) },
           </li>
           <li class="alt">
           </li>
           <li class="">
            { name:
            <span class="string">
             ‘澳ã?门?’
            </span>
            ,value:Math.round(Math.random() *1000) }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
            ]
           </li>
           <li class="">
            };
           </li>
           <li class="alt">
            <span class="comment">
             //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。
            </span>
           </li>
           <li class="">
            <span class="comment">
             //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 ‘single’即单选，也可多选
            </span>
           </li>
           <li class="alt">
            varecConfig= require(
            <span class="string">
             ‘echarts/config’
            </span>
            );
           </li>
           <li class="">
            myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) {
           </li>
           <li class="alt">
            varselected=param.selected;
           </li>
           <li class="">
            varmapSeries=option.series[0];
           </li>
           <li class="alt">
            vardata= [];
           </li>
           <li class="">
            varlegendData= [];
           </li>
           <li class="alt">
            varname;
           </li>
           <li class="">
            <span class="keyword">
             for
            </span>
            (varp=0,len=mapSeries.data.length; p&lt;len; p++) {
           </li>
           <li class="alt">
            name=mapSeries.data[p].name;
           </li>
           <li class="">
            mapSeries.data[p].selected=selected[name];
           </li>
           <li class="alt">
            <span class="keyword">
             if
            </span>
            (selected[name]) {
           </li>
           <li class="">
            alert(name);
            <span class="comment">
             //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
            });
           </li>
           <li class="alt">
            myChart.setOption(option);
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
            );
           </li>
           <li class="">
            &lt;/script&gt;
           </li>
          </ol>
         </div>
        </div>
        <p>
        </p>
       </div>
       <h4>
        <p name="t9">
        </p>
        3.1.4  完成以上操作之后，效果如下图所示：
       </h4>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/16170121-8493606dd21b4c9ebca6fce650213c9c.png"/>
       </p>
       <h3>
        <p name="t10">
        </p>
        3.2 LineChart
       </h3>
       <p>
        除了地图图表之外的其他的图标的使用方式都差不多。事实上其他的图表跟地图图表的区别在于对配置文件的引用。这里只做一个折线图的示例，其它的示例都是一样的。
       </p>
       <h4>
        <p name="t11">
        </p>
        3.2.1 跟3.1.1一样，引入echarts脚本
       </h4>
       <h4>
        <p name="t12">
        </p>
        3.2.2 跟3.2.2一样，添加渲染图表的div容器
       </h4>
       <h4>
        <p name="t13">
        </p>
        3.2.3 在3.2.2添加的div下添加如下js代码块
       </h4>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_csharp">
          <div class="bar">
           <div class="tools">
            <b>
             [csharp]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/16358571/" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_4" name="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;scripttype=
            <span class="string">
             “text/javascript”
            </span>
            &gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            require.config({
           </li>
           <li class="">
           </li>
           <li class="alt">
            paths: {
           </li>
           <li class="">
           </li>
           <li class="alt">
            echarts:
            <span class="string">
             ‘./echarts/echarts’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            :
            <span class="string">
             ‘./echarts/echarts’
            </span>
            ,
            <span class="comment">
             //这里需要注意的是除了mapchart使用的配置文件为echarts-map之外，
            </span>
           </li>
           <li class="">
            其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/line’
            </span>
            :
            <span class="string">
             ‘./echarts/echarts’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            });
           </li>
           <li class="alt">
           </li>
           <li class="">
            require(
           </li>
           <li class="alt">
           </li>
           <li class="">
            [
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/line’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            function (ec) {
           </li>
           <li class="alt">
           </li>
           <li class="">
            varmyChart=ec.init(document.getElementById(
            <span class="string">
             ‘main’
            </span>
            ));
           </li>
           <li class="alt">
           </li>
           <li class="">
            option= {
           </li>
           <li class="alt">
           </li>
           <li class="">
            tooltip: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            trigger:
            <span class="string">
             ‘axis’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            legend: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
            <span class="string">
             ‘邮®¨º件t营®a销¨²’
            </span>
            ,
            <span class="string">
             ‘联¢a盟?广?告?’
            </span>
            ,
            <span class="string">
             ‘视º¨®频¦Ì广?告?’
            </span>
            ,
            <span class="string">
             ‘直¡À接¨®访¤?问¨º’
            </span>
            ,
            <span class="string">
             ‘搜?索¡Â引°y擎?’
            </span>
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            toolbox: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            show:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            feature: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            mark:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            dataView: { readOnly:
            <span class="keyword">
             false
            </span>
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            magicType: [
            <span class="string">
             ‘line’
            </span>
            ,
            <span class="string">
             ‘bar’
            </span>
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            restore:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            saveAsImage:
            <span class="keyword">
             true
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            calculable:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            xAxis: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘category’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            boundaryGap:
            <span class="keyword">
             false
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
            <span class="string">
             ‘周¨¹一°?’
            </span>
            ,
            <span class="string">
             ‘周¨¹二t’
            </span>
            ,
            <span class="string">
             ‘周¨¹三¨y’
            </span>
            ,
            <span class="string">
             ‘周¨¹四?’
            </span>
            ,
            <span class="string">
             ‘周¨¹五?’
            </span>
            ,
            <span class="string">
             ‘周¨¹六¢¨´’
            </span>
            ,
            <span class="string">
             ‘周¨¹日¨?’
            </span>
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            yAxis: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘value’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            splitArea: { show:
            <span class="keyword">
             true
            </span>
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            series: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘邮®¨º件t营®a销¨²’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            stack:
            <span class="string">
             ‘总Á¨¹量¢?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [120,132,101,134,90,230,210]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘联¢a盟?广?告?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            stack:
            <span class="string">
             ‘总Á¨¹量¢?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [220,182,191,234,290,330,310]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘视º¨®频¦Ì广?告?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            stack:
            <span class="string">
             ‘总Á¨¹量¢?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [150,232,201,154,190,330,410]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘直¡À接¨®访¤?问¨º’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            stack:
            <span class="string">
             ‘总Á¨¹量¢?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [320,332,301,334,390,330,320]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘搜?索¡Â引°y擎?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            stack:
            <span class="string">
             ‘总Á¨¹量¢?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [820,932,901,934,1290,1330,1320]
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            };
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
            myChart.setOption(option);
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            );
           </li>
           <li class="alt">
           </li>
           <li class="">
            &lt;/script&gt;
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
            &lt;divid=
            <span class="string">
             “main1”
            </span>
            style=
            <span class="string">
             “height:500px;border:1px solid #ccc;padding:10px;”
            </span>
            &gt;&lt;/div&gt;
           </li>
           <li class="alt">
           </li>
           <li class="">
            &lt;scripttype=
            <span class="string">
             “text/javascript”
            </span>
            &gt;
           </li>
           <li class="alt">
           </li>
           <li class="">
            require.config({
           </li>
           <li class="alt">
           </li>
           <li class="">
            paths: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            echarts:
            <span class="string">
             ‘./echarts/echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            :
            <span class="string">
             ‘./echarts/echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/line’
            </span>
            :
            <span class="string">
             ‘./echarts/echarts’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            });
           </li>
           <li class="alt">
           </li>
           <li class="">
            require(
           </li>
           <li class="alt">
           </li>
           <li class="">
            [
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/line’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            function (ec) {
           </li>
           <li class="alt">
           </li>
           <li class="">
            varmyChart=ec.init(document.getElementById(
            <span class="string">
             ‘main1’
            </span>
            ));
           </li>
           <li class="alt">
           </li>
           <li class="">
            option= {
           </li>
           <li class="alt">
           </li>
           <li class="">
            title: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            text:
            <span class="string">
             ‘未¡ä来¤¡ä一°?周¨¹气?温?变À?化¡¥’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            subtext:
            <span class="string">
             ‘纯ä?属º?虚¨¦构1’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            tooltip: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            trigger:
            <span class="string">
             ‘axis’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            legend: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
            <span class="string">
             ‘最Á?高?气?温?’
            </span>
            ,
            <span class="string">
             ‘最Á?低Ì¨ª气?温?’
            </span>
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            toolbox: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            show:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            feature: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            mark:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            dataView: { readOnly:
            <span class="keyword">
             false
            </span>
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            magicType: [
            <span class="string">
             ‘line’
            </span>
            ,
            <span class="string">
             ‘bar’
            </span>
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            restore:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            saveAsImage:
            <span class="keyword">
             true
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            calculable:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            xAxis: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘category’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            boundaryGap:
            <span class="keyword">
             false
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
            <span class="string">
             ‘周¨¹一°?’
            </span>
            ,
            <span class="string">
             ‘周¨¹二t’
            </span>
            ,
            <span class="string">
             ‘周¨¹三¨y’
            </span>
            ,
            <span class="string">
             ‘周¨¹四?’
            </span>
            ,
            <span class="string">
             ‘周¨¹五?’
            </span>
            ,
            <span class="string">
             ‘周¨¹六¢¨´’
            </span>
            ,
            <span class="string">
             ‘周¨¹日¨?’
            </span>
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            yAxis: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘value’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            axisLabel: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            formatter:
            <span class="string">
             ‘{value} °?C’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            splitArea: { show:
            <span class="keyword">
             true
            </span>
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            series: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘最Á?高?气?温?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            normal: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            lineStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            shadowColor:
            <span class="string">
             ‘rgba(0,0,0,0.4)’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [11,11,15,13,12,13,10]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘最Á?低Ì¨ª气?温?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            normal: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            lineStyle: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            shadowColor:
            <span class="string">
             ‘rgba(0,0,0,0.4)’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [-2,1,2,5,3,2,0]
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            };
           </li>
           <li class="alt">
           </li>
           <li class="">
            myChart.setOption(option);
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            );
           </li>
           <li class="alt">
           </li>
           <li class="">
            &lt;/script&gt;
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
            &lt;divid=
            <span class="string">
             “main2”
            </span>
            style=
            <span class="string">
             “height:500px;border:1px solid #ccc;padding:10px;”
            </span>
            &gt;&lt;/div&gt;
           </li>
           <li class="alt">
           </li>
           <li class="">
            &lt;scripttype=
            <span class="string">
             “text/javascript”
            </span>
            &gt;
           </li>
           <li class="alt">
           </li>
           <li class="">
            require.config({
           </li>
           <li class="alt">
           </li>
           <li class="">
            paths: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            echarts:
            <span class="string">
             ‘./echarts/echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            :
            <span class="string">
             ‘./echarts/echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/line’
            </span>
            :
            <span class="string">
             ‘./echarts/echarts’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            });
           </li>
           <li class="alt">
           </li>
           <li class="">
            require(
           </li>
           <li class="alt">
           </li>
           <li class="">
            [
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            <span class="string">
             ‘echarts/chart/line’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            function (ec) {
           </li>
           <li class="alt">
           </li>
           <li class="">
            varmyChart=ec.init(document.getElementById(
            <span class="string">
             ‘main2’
            </span>
            ));
           </li>
           <li class="alt">
           </li>
           <li class="">
            option= {
           </li>
           <li class="alt">
           </li>
           <li class="">
            title: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            text:
            <span class="string">
             ‘某3楼£¤盘¨¬销¨²售º?情¨¦况?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            subtext:
            <span class="string">
             ‘纯ä?属º?虚¨¦构1’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            tooltip: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            trigger:
            <span class="string">
             ‘axis’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            legend: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
            <span class="string">
             ‘意°a向¨°’
            </span>
            ,
            <span class="string">
             ‘预¡è购o’
            </span>
            ,
            <span class="string">
             ‘成¨¦交?’
            </span>
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            toolbox: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            show:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            feature: {
           </li>
           <li class="alt">
           </li>
           <li class="">
            mark:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            dataView: { readOnly:
            <span class="keyword">
             false
            </span>
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            magicType: [
            <span class="string">
             ‘line’
            </span>
            ,
            <span class="string">
             ‘bar’
            </span>
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            restore:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            saveAsImage:
            <span class="keyword">
             true
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            calculable:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            xAxis: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘category’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            boundaryGap:
            <span class="keyword">
             false
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [
            <span class="string">
             ‘周¨¹一°?’
            </span>
            ,
            <span class="string">
             ‘周¨¹二t’
            </span>
            ,
            <span class="string">
             ‘周¨¹三¨y’
            </span>
            ,
            <span class="string">
             ‘周¨¹四?’
            </span>
            ,
            <span class="string">
             ‘周¨¹五?’
            </span>
            ,
            <span class="string">
             ‘周¨¹六¢¨´’
            </span>
            ,
            <span class="string">
             ‘周¨¹日¨?’
            </span>
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            yAxis: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘value’
            </span>
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ],
           </li>
           <li class="alt">
           </li>
           <li class="">
            series: [
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘成¨¦交?’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            smooth:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: { normal: { areaStyle: { type:
            <span class="string">
             ‘default’
            </span>
            }} },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [10,12,21,54,260,830,710]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘预¡è购o’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            smooth:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: { normal: { areaStyle: { type:
            <span class="string">
             ‘default’
            </span>
            }} },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [30,182,434,791,390,30,10]
           </li>
           <li class="alt">
           </li>
           <li class="">
            },
           </li>
           <li class="alt">
           </li>
           <li class="">
            {
           </li>
           <li class="alt">
           </li>
           <li class="">
            name:
            <span class="string">
             ‘意°a向¨°’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            type:
            <span class="string">
             ‘line’
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            smooth:
            <span class="keyword">
             true
            </span>
            ,
           </li>
           <li class="alt">
           </li>
           <li class="">
            itemStyle: { normal: { areaStyle: { type:
            <span class="string">
             ‘default’
            </span>
            }} },
           </li>
           <li class="alt">
           </li>
           <li class="">
            data: [1320,1132,601,234,120,90,20]
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            ]
           </li>
           <li class="alt">
           </li>
           <li class="">
            };
           </li>
           <li class="alt">
           </li>
           <li class="">
            myChart.setOption(option);
           </li>
           <li class="alt">
           </li>
           <li class="">
            }
           </li>
           <li class="alt">
           </li>
           <li class="">
            );
           </li>
           <li class="alt">
           </li>
           <li class="">
            &lt;/script&gt;
           </li>
          </ol>
         </div>
        </div>
        <p>
        </p>
       </div>
       <h4>
        <p name="t14">
        </p>
        3.2.4 完成以上操作之后效果图如下：
       </h4>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/16170233-48415094f4f14a49bb0f8d8b75ad3853.png"/>
       </p>
       <p>
       </p>
       <p>
        好了，今天就总结到这里了，希望能给大家带来一些帮助。这里主要是介绍地图控件的使用，因为其官方文档上关于路径的配置写的很不清楚，所以才会想把这些走的弯路给总结一下。对于其他的图表控件的使用都很简单，大家可以参考官方的文档。
        <a href="http://echarts.baidu.com/doc/doc.html" target="_blank">
         http://echarts.baidu.com/doc/doc.html
        </a>
       </p>
       <p>
        From : http://blog.csdn.net/xuemoyao/article/details/16358571/
       </p>
      </div>
      <div>
       <strong>
        注：转载文章均来自于公开网络，仅供学习使用，不会用于任何商业用途，如果侵犯到原作者的权益，请您与我们联系删除或者授权事宜，联系邮箱：contact@dataunion.org。转载数盟网站文章请注明原文章作者，否则产生的任何版权纠纷与数盟无关。
       </strong>
      </div>
      <!--content_text-->
      <div class="fenxian">
       <!-- JiaThis Button BEGIN -->
       <div class="jiathis_style_32x32">
        <p class="jiathis_button_weixin">
        </p>
        <p class="jiathis_button_tsina">
        </p>
        <p class="jiathis_button_qzone">
        </p>
        <p class="jiathis_button_cqq">
        </p>
        <p class="jiathis_button_tumblr">
        </p>
        <a class="jiathis jiathis_txt jtico jtico_jiathis" href="http://www.jiathis.com/share" target="_blank">
        </a>
        <p class="jiathis_counter_style">
        </p>
       </div>
       <!-- JiaThis Button END -->
      </div>
     </article>
     <!--content-->
     <!--相关文章-->
     <div class="xianguan">
      <div class="xianguantitle">
       相关文章！
      </div>
      <ul class="pic">
       <li>
        <a href="http://dataunion.org/24610.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/687474703a2f2f61727469636c65732e70686f64616c2e636f6d2f67726170686963732f766d61702e6a7067-300x175.jpg"/>
        </a>
        <a class="link" href="http://dataunion.org/24610.html" rel="bookmark" title="程序员必知的七个图形工具">
         程序员必知的七个图形工具
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/24552.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/123627j4ncc1r1hfmmybhz-300x156.jpg"/>
        </a>
        <a class="link" href="http://dataunion.org/24552.html" rel="bookmark" title="相似图片搜索的原理">
         相似图片搜索的原理
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/24538.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/210714mgqaie37999iaz4b-300x169.gif"/>
        </a>
        <a class="link" href="http://dataunion.org/24538.html" rel="bookmark" title="可视化对话的未来：神经网络能让emoji聊天更智能">
         可视化对话的未来：神经网络能让emoji聊天更智能
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/24492.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/t01b8312cd3c48034c1-300x165.jpg"/>
        </a>
        <a class="link" href="http://dataunion.org/24492.html" rel="bookmark" title="如何利用维基百科的数据可视化当代音乐史">
         如何利用维基百科的数据可视化当代音乐史
        </a>
       </li>
      </ul>
     </div>
     <!--相关文章-->
     <div class="comment" id="comments">
      <!-- You can start editing here. -->
      <!-- If comments are open, but there are no comments. -->
      <div class="title">
       期待你一针见血的评论，Come on！
      </div>
      <div id="respond">
       <p>
        不用想啦，马上
        <a href="http://dataunion.org/wp-login.php?redirect_to=http%3A%2F%2Fdataunion.org%2F6423.html">
         "登录"
        </a>
        发表自已的想法.
       </p>
      </div>
     </div>
     <!-- .nav-single -->
    </div>
    <!--Container End-->
    <aside id="sitebar">
     <div class="sitebar_list2">
      <div class="wptag">
       <span class="tagtitle">
        热门标签+
       </span>
       <div class="tagg">
        <ul class="menu" id="menu-%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5">
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1605" id="menu-item-1605">
          <a href="http://taidizh.com/">
           泰迪智慧
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20884" id="menu-item-20884">
          <a href="http://www.transwarp.cn/">
           星环科技
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3538" id="menu-item-3538">
          <a href="http://datall.org/">
           珈和遥感
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20888" id="menu-item-20888">
          <a href="http://www.chinahadoop.cn/">
           小象学院
          </a>
         </li>
        </ul>
       </div>
      </div>
     </div>
     <div class="sitebar_list">
      <div class="textwidget">
       <div align="center">
        <a href="http://study.163.com/course/courseMain.htm?courseId=991022" target="_blank">
         <img src="http://dataunion.org/wp-content/uploads/2016/03/dv.jpg"/>
        </a>
       </div>
      </div>
     </div>
     <div class="sitebar_list">
      <h4 class="sitebar_title">
       文章分类
      </h4>
      <div class="tagcloud">
       <a class="tag-link-44" href="http://dataunion.org/category/industry/demo" style="font-size: 10.204724409449pt;" title="4个话题">
        Demo展示
       </a>
       <a class="tag-link-31" href="http://dataunion.org/category/experts" style="font-size: 15.826771653543pt;" title="52个话题">
        专家团队
       </a>
       <a class="tag-link-870" href="http://dataunion.org/category/tech/ai" style="font-size: 19.795275590551pt;" title="273个话题">
        人工智能
       </a>
       <a class="tag-link-488" href="http://dataunion.org/category/%e5%8a%a0%e5%85%a5%e6%95%b0%e7%9b%9f" style="font-size: 8pt;" title="1个话题">
        加入数盟
       </a>
       <a class="tag-link-869" href="http://dataunion.org/category/tech/viz" style="font-size: 17.204724409449pt;" title="93个话题">
        可视化
       </a>
       <a class="tag-link-30" href="http://dataunion.org/category/partners" style="font-size: 10.645669291339pt;" title="5个话题">
        合作伙伴
       </a>
       <a class="tag-link-889" href="http://dataunion.org/category/parterc" style="font-size: 11.582677165354pt;" title="8个话题">
        合作会议
       </a>
       <a class="tag-link-104" href="http://dataunion.org/category/books" style="font-size: 12.96062992126pt;" title="15个话题">
        图书
       </a>
       <a class="tag-link-220" href="http://dataunion.org/category/tech/base" style="font-size: 19.850393700787pt;" title="281个话题">
        基础架构
       </a>
       <a class="tag-link-219" href="http://dataunion.org/category/tech/analysis" style="font-size: 19.409448818898pt;" title="232个话题">
        数据分析
       </a>
       <a class="tag-link-887" href="http://dataunion.org/category/tech/dm" style="font-size: 13.291338582677pt;" title="17个话题">
        数据挖掘
       </a>
       <a class="tag-link-34" href="http://dataunion.org/category/tech" style="font-size: 20.732283464567pt;" title="404个话题">
        文章
       </a>
       <a class="tag-link-1" href="http://dataunion.org/category/uncategorized" style="font-size: 22pt;" title="693个话题">
        未分类
       </a>
       <a class="tag-link-4" href="http://dataunion.org/category/events" style="font-size: 14.503937007874pt;" title="29个话题">
        活动
       </a>
       <a class="tag-link-890" href="http://dataunion.org/category/tech/%e6%b7%b1%e5%ba%a6%e5%ad%a6%e4%b9%a0" style="font-size: 10.204724409449pt;" title="4个话题">
        深度学习
       </a>
       <a class="tag-link-221" href="http://dataunion.org/category/tech/devl" style="font-size: 18.968503937008pt;" title="193个话题">
        编程语言
       </a>
       <a class="tag-link-888" href="http://dataunion.org/category/career" style="font-size: 15.661417322835pt;" title="48个话题">
        职业规划
       </a>
       <a class="tag-link-5" href="http://dataunion.org/category/jobs" style="font-size: 14.11811023622pt;" title="25个话题">
        职位
       </a>
       <a class="tag-link-871" href="http://dataunion.org/category/industry" style="font-size: 15.716535433071pt;" title="49个话题">
        行业
       </a>
       <a class="tag-link-613" href="http://dataunion.org/category/industry/case" style="font-size: 16.984251968504pt;" title="84个话题">
        行业应用
       </a>
       <a class="tag-link-885" href="http://dataunion.org/category/industry/news" style="font-size: 17.425196850394pt;" title="102个话题">
        行业资讯
       </a>
       <a class="tag-link-10" href="http://dataunion.org/category/training" style="font-size: 14.228346456693pt;" title="26个话题">
        课程
       </a>
       <a class="tag-link-16" href="http://dataunion.org/category/sources" style="font-size: 15.661417322835pt;" title="48个话题">
        资源
       </a>
      </div>
     </div>
     <div class="sitebar_list">
      <h4 class="sitebar_title">
       功能
      </h4>
      <ul>
       <li>
        <a href="http://dataunion.org/wp-login.php?action=register">
         注册
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/wp-login.php">
         登录
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/feed">
         文章
         <abbr title="Really Simple Syndication">
          RSS
         </abbr>
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/comments/feed">
         评论
         <abbr title="Really Simple Syndication">
          RSS
         </abbr>
        </a>
       </li>
       <li>
        <a href="https://cn.wordpress.org/" title="基于WordPress，一个优美、先进的个人信息发布平台。">
         WordPress.org
        </a>
       </li>
      </ul>
     </div>
    </aside>
    <div class="clear">
    </div>
   </div>
   <!--main-->
   ﻿
   <footer id="dibu">
    <div class="about">
     <div class="right">
      <ul class="menu" id="menu-%e5%ba%95%e9%83%a8%e8%8f%9c%e5%8d%95">
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18024" id="menu-item-18024">
        <a href="http://dataunion.org/category/partners">
         合作伙伴
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20881" id="menu-item-20881">
        <a href="http://dataunion.org/contribute">
         文章投稿
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20872" id="menu-item-20872">
        <a href="http://dataunion.org/category/%e5%8a%a0%e5%85%a5%e6%95%b0%e7%9b%9f">
         加入数盟
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22441" id="menu-item-22441">
        <a href="http://dataunion.org/f-links">
         友情链接
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20874" id="menu-item-20874">
        <a href="http://dataunion.org/aboutus">
         关于数盟
        </a>
       </li>
      </ul>
      <p class="banquan">
       数盟社区        ，
        做最棒的数据科学社区
      </p>
     </div>
     <div class="left">
      <ul class="bottomlist">
       <li>
        <a href="http://weibo.com/DataScientistUnion  " target="_blank" 　title="">
         <img src="http://dataunion.org/wp-content/themes/yzipi/images/weibo.png"/>
        </a>
       </li>
       <li>
        <a class="cd-popup-trigger" href="http://dataunion.org/6423.html#0">
         <img src="http://dataunion.org/wp-content/themes/yzipi/images/weixin.png"/>
        </a>
       </li>
      </ul>
      <div class="cd-popup">
       <div class="cd-popup-container">
        <h1>
         扫描二维码,加微信公众号
        </h1>
        <img src="http://dataunion.org/wp-content/themes/yzipi/images/2014-12-06-1515289049.png"/>
        <a class="cd-popup-close" href="http://dataunion.org/6423.html">
        </a>
       </div>
       <!-- cd-popup-container -->
      </div>
      <!-- cd-popup -->
     </div>
    </div>
    <!--about-->
    <div class="bottom">
     <a href="http://dataunion.org/">
      数盟社区
     </a>
     <a href="http://www.miitbeian.gov.cn/" rel="external nofollow" target="_blank">
      京ICP备14026740号
     </a>
     联系我们：
     <a href="mailto:contact@dataunion.org" target="_blank">
      contact@dataunion.org
     </a>
     <div class="tongji">
     </div>
     <!--bottom-->
     <div class="scroll" id="scroll" style="display:none;">
      ︿
     </div>
    </div>
   </footer>
   <!--dibu-->
  </div>
 </body>
</html>